<template>
    <div class="hospital">
        <div class="search">
            <div class="left">
                <!-- 医院名称 -->
                <div class="search_list">
                    <span class="search_text">医院名称：</span>
                    <el-input size="small" placeholder="输入医院" v-model="hospital_name"></el-input>
                </div>
            </div>
            <div class="center">
                <!--省份-->
                <div class="search_list">
                    <span class="search_text">省份：</span>
                    <el-select 
                        size="small" 
                        v-model="provinces_name"
                        clearable 
                        filterable 
                        placeholder="请选择"
                        @change="get_city">
                        <el-option 
                            v-for="item in provincesList" 
                            :key="item.provinceId" 
                            :label="item.provinceName"
                            :value="item.provinceName">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="right">
                <!--城市-->
                <div class="search_list">
                    <span class="search_text">城市：</span>
                    <el-select size="small" v-model="city_name" clearable filterable placeholder="请选择">
                        <el-option 
                            v-for="item in cityList" 
                            :key="item.cityId" 
                            :label="item.cityName"
                            :value="item.cityName">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
        <!--列表-->
        <div class="list blockMould hospital_list">
            <div class="list_head_button">
                <div class="search_name">
                    <el-button size="mini" type="primary" @click="search_list">查询</el-button>
                    <el-button size="mini" @click="reset_list">重置</el-button>
                </div>
            </div>
            <el-table
                :header-cell-style="{background:'#F6F7FB',color:'#666666',height: '50px'}"
                :row-class-name="tableRowClassName"
                :data="hospitalList">
                <el-table-column
                    prop="id"
                    label="医院VRID"
                    min-width="50">
                </el-table-column>
                <el-table-column
                    prop=""
                    label="医院主数据ID"
                    min-width="70">
                </el-table-column>
                <el-table-column
                    prop="hospitalName"
                    label="医院名称"
                    min-width="105"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="province"
                    label="省份"
                    min-width="70">
                </el-table-column>
                <el-table-column
                    prop="city"
                    label="城市"
                    min-width="65"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="gradeAndLevel"
                    label="医院等级"
                    min-width="68s">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="40">
                    <template slot-scope="scope">
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="编辑" placement="bottom">
                            <el-button type="text" @click="edit_info(scope.row)">
                                <img src="../../assets/common/edit.svg" alt="">
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
        </div>
        <!--编辑医院-->
        <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="526px"
        class="label_dialog"
        :before-close="closeHospitalDialog">
            <div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">医院名称：</span>
                    <el-input size="small" v-model="dialog_hospital_name" placeholder="请输入医院名称" @blur="changeHospitalName"></el-input>
                </div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">省份：</span>
                    <el-select 
                        size="small" 
                        filterable 
                        v-model="dialog_provinces_name" 
                        placeholder="请选择"
                        @change="change_city">
                        <el-option 
                            v-for="item in provincesList" 
                            :key="item.provinceId" 
                            :label="item.provinceName"
                            :value="item.provinceName">
                        </el-option>
                    </el-select>
                </div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">城市：</span>
                    <el-select size="small" filterable v-model="dialog_city_name" placeholder="请选择">
                        <el-option 
                            v-for="item in cityList" 
                            :key="item.cityId" 
                            :label="item.cityName"
                            :value="item.cityName">
                        </el-option>
                    </el-select>
                </div>
                <div class="search_list hospital_level">
                    <span class="search_text">医院等级：</span>
                    <el-select size="small" clearable filterable v-model="dialog_hospital_level" placeholder="请选择">
                        <el-option 
                            v-for="item in dialogHospitalLevelList" 
                            :key="item.resourceValue" 
                            :label="item.resourceItem"
                            :value="item.resourceItem">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelHospitalDialog">取消</el-button>
                <el-button type="primary" @click="edit_hospital_info">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { api, baseAjax } from '../../api/api';
    import pagination from '../public/pagination';
    import {statusCode} from '../../utils/index';
    export default {
        name: "hospitalManagement",
        components:{
            pagination
        },
        data() {
            return {
                //分页
                page: {
                    currentPage: 1,    //当前页
                    pageSize: 10,    //每页显示条数
                    totalPage: 0,   //总页数
                    total:null   //总条数
                },
                dialogVisible: false,  //是否可以编辑医院信息
                hospital_name:'',   //医院名称
                provinces_name:'',  //省份
                provincesList:[],   //省份下拉框值
                city_name:'',   //城市
                cityList:[],   //城市下拉框值
                hospitalList:[],   //列表数据
                dialog_hospital_name:'',  //编辑医院名称
                dialog_provinces_name:'',   //编辑省份
                dialog_city_name:'',   //编辑城市
                dialog_hospital_level:'',   //编辑医院等级
                dialogHospitalLevelList:[],   //编辑医院等级下拉框值
                hospital_id:0, //医院id
                edit_hospital_name:'',
                is_edit_hospital_info:false   //是否可编辑医院信息
            }
        },
        mounted(){
            this.getHospitalInfo();   //列表医院信息
            this.getHospitalLevel();//获取医院等级
            this.getAllProvince();  //获取省份
        },
        methods: {
            //修改列表tr颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                return 'success_row';
                }
                return '';
            },
            //改变当前页码
            handleCurrentChange(currentPage) {
                this.page.currentPage = currentPage;
                this.getHospitalInfo();
            },
            //改变每页条数
            handlePageSize(pageSize){
                this.page.pageSize = pageSize;
                this.getHospitalInfo();
            },
            //编辑医院弹框信息
            edit_info(info){
                this.dialogVisible = true;
                this.dialog_hospital_name = info.hospitalName;
                this.dialog_provinces_name = info.province;
                this.dialog_city_name = info.city;
                this.dialog_hospital_level = info.gradeAndLevel;
                this.hospital_id = info.id;
                this.edit_hospital_name = info.hospitalName;
                this.get_city(info.province);
            },
            //编辑医院信息
            edit_hospital_info(){
                let that = this;
                if(!this.dialog_hospital_name){
                    this.$alert('请填写"医院名称"');
                }else if(this.dialog_hospital_name.length > 20){
                    this.$alert('医院名称不能大于20个字');
                }else if(!this.dialog_provinces_name){
                    this.$alert('请选择"省份"');
                }else if(!this.dialog_city_name){
                    this.$alert('请选择"城市"');
                }else{
                    if(!this.is_edit_hospital_info){   //医院名不重复，可以修改医院信息
                        let data = {
                            city:this.dialog_city_name,
                            gradeAndLevel:this.dialog_hospital_level,
                            hospitalId:this.hospital_id,
                            hospitalName:this.dialog_hospital_name,
                            province:this.dialog_provinces_name
                        };
                        baseAjax(api.edit_hospital_info, data, (res)=>{
                            if(res.code === statusCode.success){
                                if(res.data == true){
                                    that.$message.success('编辑成功');
                                    that.dialogVisible = false;
                                    that.dialog_hospital_name = '';
                                    that.dialog_provinces_name = '';
                                    that.dialog_city_name = '';
                                    that.dialog_hospital_level = '';
                                    that.hospital_id = 0;
                                    that.edit_hospital_name = '';
                                    that.getHospitalInfo();
                                }else{
                                    that.$message.error('编辑失败');
                                }
                            }
                        });
                    }
                }
            },
            //取消弹框
            cancelHospitalDialog(){
                this.dialogVisible = false;
                this.dialog_hospital_name = '';
                this.dialog_provinces_name = '';
                this.dialog_city_name = '';
                this.dialog_hospital_level = '';
                this.hospital_id = 0;
                this.edit_hospital_name = '';
            },
            //关闭弹框清空表单元素
            closeHospitalDialog(done){
                this.dialog_hospital_name = '';
                this.dialog_provinces_name = '';
                this.dialog_city_name = '';
                this.dialog_hospital_level = '';
                this.hospital_id = 0;
                this.edit_hospital_name = '';
                done();
            },
            //列表数据
            getHospitalInfo(){
                let that = this;
                let data = {
                    city:this.city_name,
                    currentPage:this.page.currentPage,
                    hospitalName:this.hospital_name,
                    pageSize:this.page.pageSize,
                    province:this.provinces_name,
                    totalPage:this.page.totalPage
                };
                baseAjax(api.get_hospital_info, data, (res)=>{
                    if(res.code === statusCode.success){
                        let { pageSize, totalPage, value, count} = res.data;
                        that.page.pageSize = pageSize;
                        that.page.totalPage = totalPage;
                        that.page.total = count;
                        that.hospitalList = value;
                    }
                });
            },
            //搜索
            search_list(){
                this.handleCurrentChange(1);
            },
            //重置
            reset_list(){
                this.hospital_name = '';
                this.provinces_name = '';
                this.city_name = '';
            },
            //获取医院等级
            getHospitalLevel(){
                let that = this;
                api.get_resource_item = {
                    url:api.get_resource_item_url+'grade_and_level',
                    method:api.get_resource_item.method
                };
                baseAjax(api.get_resource_item, '', (res)=>{
                    if(res.code === statusCode.success){
                        that.dialogHospitalLevelList = res.data;
                    }
                });
            },
            //获取省份
            getAllProvince(){
                let that = this;
                baseAjax(api.get_all_province, '', (res)=>{
                    if(res.code === statusCode.success){
                        that.provincesList = res.data;
                    }
                });
            },
            //获取城市
            get_city(val){
                this.city_name = '';
                let that = this;
                let provincesId = null;
                this.provincesList.forEach(item=>{
                    if(val === item.provinceName){
                        provincesId = item.provinceId;
                    }
                });
                api.get_city = {
                    url:api.get_city_url+provincesId,
                    method:api.get_city.method
                }
                baseAjax(api.get_city, '', (res)=>{
                    if(res.code === statusCode.success){
                        if(res.data.length > 0){
                            that.cityList = res.data;
                        }else{
                            that.dialog_city_name = '';
                            that.city_name = '';
                            that.cityList = [];
                        }
                    }
                });
            },
            //编辑修改城市
            change_city(val){
                this.dialog_city_name = '';
                this.get_city(val);
            },
            changeHospitalName(){
                let that = this;
                if(this.dialog_hospital_name === this.edit_hospital_name){
                    this.is_edit_hospital_info = false;
                }else{
                    api.hospital_exist = {
                        url:api.hospital_exist_url+this.dialog_hospital_name,
                        method:api.hospital_exist.method
                    };
                    baseAjax(api.hospital_exist, '', (res)=>{
                        if(res.code === statusCode.success){
                            if(res.data == true){  //医院名没有重复
                                that.is_edit_hospital_info = false;
                            }else{   //医院名重复
                                that.$message.error(res.message);
                                that.is_edit_hospital_info = true;
                            }
                        }
                    });
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.hospital{
    font-family: PingFangSC-Regular, PingFang SC;
    .search{
        .left,.center{
            margin-right:80px;
        }
        .center,.right{
            .search_text{
                min-width:42px !important;
            }
        }
    }

    .hospital_list{
        border-radius: 2px;
        padding:24px 16px 1px 16px;
        .list_head_button{
            justify-content:flex-end;
        }
        /deep/.el-table{
            tbody{
                tr{
                    td:first-child{
                        padding-left:44px;
                    }
                    td:last-child{
                        .cell{
                            .el-button{
                                margin:0;
                            }
                        }
                    }
                }
            }
        }
    }

    /deep/.el-dialog{
        .hospital_level{
            padding-left:10px;
        }
    }

    i {
      font-size: 20px;
      margin: 0 15px;
    }
}
</style>
